<template>
  <div>
    <!--弹出框1-->
    <el-dialog title="编辑活动" :visible.sync="dialogFormVisible">
      <el-form :model="changeForm">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="changeForm.name" autocomplete="off" maxlength="15" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-select v-model="changeForm.region">
            <el-option label="上线" :value=1></el-option>
            <el-option label="下线" :value=0></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间" :label-width="formLabelWidth">
          <el-date-picker
                  v-model="changeForm.date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="活动背景颜色" :label-width="formLabelWidth">
          <el-color-picker style="vertical-align: middle" v-model="changeForm.color"></el-color-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changetActive">确 定</el-button>
      </div>
    </el-dialog>
    <!--弹出框2-->
    <el-dialog title="卡券配置" :visible.sync="dialogTableVisible2" width="70%">
      <div class="content">
        <div class="myBox">
          <span class="littleTitle">卡券ID</span>
          <el-input type="text" placeholder="请输入卡券ID" v-model="cardId"></el-input>
        </div>
        <div class="xinz">
          <el-button type="primary" @click="selectCoupon">查询</el-button>
          <el-button type="primary" @click="addCoupon">新增</el-button>
        </div>
      </div>
      <el-table
              :data="cardTable"
              border
              :cell-style="cellStyle"
              :header-cell-style="headerStyle"
              style="width: 100%">
        <el-table-column
                prop="couponInfoId"
                label="优惠券ID">
        </el-table-column>
        <el-table-column
                prop="couponInfoName"
                label="优惠券名称">
        </el-table-column>
        <el-table-column
                prop="couponInfoQuota"
                label="面额(元)">
        </el-table-column>
        <el-table-column
                prop="couponRule.couponRuleBeginDate"
                label="开始时间">
        </el-table-column>
        <el-table-column
                prop="couponRule.couponRuleEndDate"
                label="结束时间">
        </el-table-column>
        <el-table-column
                prop="couponInfoCreateDate"
                label="创建时间">
        </el-table-column>
        <el-table-column
                prop="userId"
                label="创建人ID">
        </el-table-column>
        <el-table-column label="操作" v-if="couponCaoZuo">
          <template slot-scope="scope">
            <div class="rBtn" @click="deleteCoupon(scope.row)">删除</div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
              @current-change="CurrentChange"
              :page-size=this.couponPage
              :pager-count="7"
              layout="prev, pager, next"
              :total=this.cardTotal
              style="display: flex;justify-content: center"
              v-if="select"
      >
      </el-pagination>
      <div style="display: flex;justify-content: center">
        <el-button type="primary" @click="restCardTable">返回</el-button>
        <el-button type="primary" @click="dialogTableVisible2 = false">返回活动</el-button>
      </div>

    </el-dialog>
    <!--内容-->
    <div class="title">活动列表</div>
    <div class="selectBox">
      <div>
        <span class="inputTitle">活动ID</span>
        <el-input
                type="text"
                v-model="activeId"
                placeholder="请输入活动ID"
        >
        </el-input>
      </div>
      <div>
        <span class="inputTitle">活动名称</span>
        <el-input
                type="text"
                v-model="activeName"
                placeholder="请输入活动名称"
        >
        </el-input>
      </div>
      <div>
        <span class="inputTitle">活动状态</span>
        <el-select v-model="value" placeholder="请选择活动状态">
          <el-option
                  v-for="item in stateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="btnBox">
      <el-button type="primary" @click="selectActive">查询</el-button>
      <el-button type="primary" @click="resetActive">重置</el-button>
    </div>
    <el-table
            :data="tableData"
            border
            :cell-style="cellStyle"
            :header-cell-style="headerStyle"
            style="width: 90%"
    >
      <el-table-column
              prop="activityInfoId"
              label="活动ID">
      </el-table-column>
      <el-table-column
              prop="activityShareSetting.activityShareContent"
              label="活动链接">
      </el-table-column>
      <el-table-column
              prop="activityInfoName"
              label="活动名称">
      </el-table-column>
      <el-table-column
              prop="activityInfoStatus"
              label="活动状态">
      </el-table-column>
      <el-table-column
              prop="activityInfoBeginTime"
              label="开始时间">
      </el-table-column>
      <el-table-column
              prop="activityInfoEndTime"
              label="结束时间">
      </el-table-column>
      <el-table-column
              prop="activityInfoCreateDate"
              label="创建时间">
      </el-table-column>
      <el-table-column
              prop="userId"
              label="创建人ID">
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <div class="bigBtn" @click="couponConfig(scope.row)">卡券配置</div>
          <div class="bBtn" @click="editActive(scope.row)">编辑</div>
          <div class="rBtn" @click="deleteActive(scope.row)">删除</div>
        </template>

      </el-table-column>
    </el-table>
    <el-pagination
            @current-change="handleCurrentChange"
            :page-size=this.activePageSize
            :pager-count="7"
            layout="prev, pager, next"
            :total=this.activeTotal
            style="display: flex;justify-content: center"
    >
    </el-pagination>

    <div style="display: flex;justify-content: center;margin-top: 20px">
      <el-button type="primary" @click="resetTableData">返回</el-button>
    </div>

  </div>
</template>

<script>
    import api from '../../tool/api'
    import axios from '../../tool/http'
    export default {
        name: "activeList",
        data() {
            return {
                activeId: '',
                activeName: '',
                value: '',
                stateOptions: [
                    {
                        value: 1,
                        label: '上线'
                    },
                    {
                        value: 0,
                        label: '下线'
                    }
                ],
                tableData: [],
                cellStyle:{"text-align":"center"},
                headerStyle:{"text-align":"center","background-color":"#3366FF","color":"white"},
                cardId:'',
                cardTable:[],
                cardAllData:[],
                activeTotal:0,
                activePageSize:5,
                activeCurrent:1,
                cardPageSize:5,
                cardTotal:0,
                cardCurrent:1,
                allData:[],
                allTotal:0,
                dialogFormVisible:false,
                dialogTableVisible2:false,
                changeForm:{
                    name: '',
                    region: '',
                    date:'',
                    color:'',
                },
                formLabelWidth: '120px',
                formChange:false,
                endChangeForm:{},
                changeActiveId:'',
                select:true,
                couponCaoZuo:true,
                // allDataIf:false,
                // selectDataIf:true,
                temporaryActiveId:'',
                couponPage:5,
                // couponTotal:0,
                currentCoupon:1,
                selectTotal:0,
                selectCurrent:1,
                selectPageSize:5,
                /*暂时存放数据*/
                myActiveId:'',
                myActiveName:'',
                myState:''
            }
        },
        methods:{
            handleCurrentChange(val){
                if (this.tableData===this.allData) {
                    this.getData(val)
                }else {
                    this.axios(api.tt_selectActive,'post',{
                        activityInfoId:this.myActiveId,//null
                        activityInfoName:this.myActiveName,//null
                        activityInfoStatus:this.myState,//1
                        page:{
                            currentPage:val,
                            pageSize:this.selectPageSize
                        }
                    }).then(res=>{
                        this.tableData=res.data.data.objectList;
                        this.activeTotal=res.data.data.totalSize;
                        for (let i=0 ;i<=this.tableData.length;i++) {
                            if (this.tableData[i].activityInfoStatus===1) {
                                this.tableData[i].activityInfoStatus='上线'
                            }else {
                                this.tableData[i].activityInfoStatus='下线'
                            }
                        }
                    }).catch(err=>{
                        console.log(err)
                    })
                }

            },

            CurrentChange(val){
                this.couponAxios(this.temporaryActiveId,val);
            },

            deleteCoupon(row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // console.log(this.temporaryActiveId)
                    // console.log(row.couponInfoId)
                    axios({
                        url:api.tt_deleteCoupon,
                        method:'delete',
                        data:{
                            activityId:this.temporaryActiveId,
                            couponId:row.couponInfoId
                        }
                    }).then(res=>{
                        if (res.data.msg==='success') {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }else {
                            this.$message.error('删除失败')
                        }
                        this.couponAxios(this.temporaryActiveId,this.cardCurrent)
                    }).catch(err=>{
                        console.log(err)
                        this.$message.error('删除失败')
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },

            axios(url,method,data){
                return axios({
                    url:url,
                    method:method,
                    data:data
                })
            },

            getData(val){
                this.activeCurrent=val;
                this.axios(api.tt_selectAllActive,'post',{
                    pageSize:this.activePageSize,
                    currentPage:this.activeCurrent
                }).then(res=>{
                    this.allTotal=res.data.data.totalSize;
                    this.activeTotal=this.allTotal;
                    this.allData=res.data.data.objectList;
                    for(let i=0;i<this.allData.length;i++){
                        if (this.allData[i].activityInfoStatus===0) {
                            this.allData[i].activityInfoStatus='下线'
                        }else {
                            this.allData[i].activityInfoStatus='上线'
                        }
                    }
                    this.tableData=this.allData
                }).catch(err=>{
                    console.log(err)
                })
            },

            selectActive(){
                if (this.activeId===''){
                    this.myActiveId=null
                } else {
                    this.myActiveId=Number(this.activeId)
                }
                if (this.activeName==='') {
                    this.myActiveName=null
                }else {
                    this.myActiveName=this.activeName
                }
                if (this.value==='') {
                    this.myState=null
                }else {
                    this.myState=this.value
                }

                if (this.myActiveId===null && this.myActiveName===null && this.myState===null) {
                    this.$message('请输入至少一个条件')
                }else {
                    this.axios(api.tt_selectActive,'post',{
                        activityInfoId:this.myActiveId,//null
                        activityInfoName:this.myActiveName,//null
                        activityInfoStatus:this.myState,//1
                        page:{
                            currentPage:this.selectCurrent,
                            pageSize:this.selectPageSize
                        }
                    }).then(res=>{
                        if (res.data.data===null){
                            this.$message.error('目前没有符合条件的活动')
                        }else {
                            this.tableData=res.data.data.objectList;
                            this.activeTotal=res.data.data.totalSize;
                            for (let i=0 ;i<=this.tableData.length;i++) {
                                if (this.tableData[i].activityInfoStatus===1) {
                                    this.tableData[i].activityInfoStatus='上线'
                                }else {
                                    this.tableData[i].activityInfoStatus='下线'
                                }
                            }
                        }
                    }).catch(err=>{
                        console.log(err)
                    })
                }

            },

            resetActive(){
                this.activeId='';
                this.activeName='';
                this.value='';
            },

            resetTableData(){
                this.tableData=this.allData;
                this.activeTotal=this.allTotal
            },

            deleteActive(row){
                let activeId = row.activityInfoId;
                this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    axios({
                        url:api.tt_deleteActive,
                        method:'delete',
                        params:{
                            id:activeId
                        }
                    }).then(res=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getData(this.activeCurrent)
                    }).catch(err=>{
                        console.log(err)
                        this.$message.error('删除失败')
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

                // this.axios(api.tt_deleteActive,'delete',activeId).then(res=>{
                //     console.log(res)
                // }).catch(err=>{
                //     console.log(err)
                // })
            },

            editActive(row){
                this.changeActiveId=row.activityInfoId;
                let change=JSON.stringify(row);
                let changeData= JSON.parse(change)
                if (changeData.activityInfoStatus==='上线') {
                    changeData.activityInfoStatus=1
                }else {
                    changeData.activityInfoStatus=0
                }
                let date = [changeData.activityInfoBeginTime,changeData.activityInfoEndTime]
                this.dialogFormVisible=true;
                this.changeForm.name=changeData.activityInfoName;
                this.changeForm.region=changeData.activityInfoStatus;
                this.changeForm.date=date;
                this.changeForm.color=changeData.activityInfoBackground;
                let data = JSON.stringify(this.changeForm);
                this.endChangeForm= JSON.parse(data)
            },

            changetActive(){
                if(JSON.stringify(this.endChangeForm)!==JSON.stringify(this.changeForm)){
                    let [changeStart,changeEnd] = this.changeForm.date;
                    axios({
                        url:api.tt_setActive,
                        method:'put',
                        data:{
                            activityInfoId:this.changeActiveId,
                            activityInfoName:this.changeForm.name,
                            activityInfoStatus:this.changeForm.region,
                            activityInfoBackground:this.changeForm.color,
                            activityInfoBeginTime:changeStart,
                            activityInfoEndTime:changeEnd
                        }
                    }).then(res=>{
                        this.$message.success('修改成功');
                        this.changeForm.name='';
                        this.changeForm.region='';
                        this.changeForm.date='';
                        this.changeForm.color='';
                        this.getData(this.activeCurrent)
                    }).catch(err=>{
                        console.log(err)
                    })
                }else {
                    this.$message.warning('您没有修改活动')
                }

                this.dialogFormVisible = false
            },

            couponAxios(id,val){
                this.axios(api.tt_selectCoupon,'post',{
                    activityId:id,
                    page:{
                        currentPage:val,
                        pageSize:this.cardPageSize
                    }
                }).then(res=>{
                    this.cardAllData= res.data.data.objectList;
                    this.cardTable=this.cardAllData;
                    this.cardTotal=res.data.data.totalSize
                }).catch(err=>{
                    console.log(err)
                })
            },

            couponConfig(row){
                this.dialogTableVisible2=true;
                this.cardTable=[];
                this.temporaryActiveId=row.activityInfoId;
                this.couponAxios(this.temporaryActiveId,this.cardCurrent);
                // this.axios(api.tt_selectCoupon,'post',{
                //     activityId:this.temporaryActiveId,
                //     page:{
                //         currentPage:this.cardCurrent,
                //         pageSize:this.cardPageSize
                //     }
                // }).then(res=>{
                //     this.cardAllData= res.data.data.objectList;
                //     this.cardTable=this.cardAllData;
                //     this.cardTotal=res.data.data.totalSize
                // }).catch(err=>{
                //     console.log(err)
                // })
            },

            selectCoupon(){
                if (this.cardId!=='') {
                    axios({
                        url:api.tt_selectCouponById,
                        method:'get',
                        params: {
                            id:this.cardId
                        }
                    }).then(res=>{
                        console.log(res);
                        this.cardTable=[];
                        this.cardTable.push(res.data.data);
                        this.select=false;
                        this.couponCaoZuo=false;
                    }).catch(err=>{
                        console.log(err)
                    })
                }
            },

            restCardTable(){
                this.select=true;
                this.cardTable=this.cardAllData;
                this.couponCaoZuo=true
            },

            addCoupon(){
                if (this.cardId!==''){
                    axios({
                        url:api.tt_addCoupon,
                        method:'post',
                        data:{
                            activityId:this.temporaryActiveId,
                            couponId:this.cardId,
                        }
                    }).then(res=>{
                        this.$message.success('新增优惠券成功');
                        this.couponAxios(this.temporaryActiveId,this.cardCurrent);
                        this.restCardTable()
                    }).catch(err=>{
                        console.log(err)
                        this.$message.error('新增优惠券失败')
                    })
                }

            }
        },
        created() {
            this.getData(1)
        }
    }
</script>

<style scoped lang="less">
  .title{
    padding: 20px 10px;
    border-bottom: 1px solid #c0c0c0;
  }

  .el-input {
    width: 150px;
  }

  .selectBox {
    display: flex;
    justify-content: space-around;
    padding: 20px;
  }

  .inputTitle {
    margin-right: 15px;
  }

  .btnBox {
    margin-left: 100px;
    margin-top: 20px;
  }

  .selectBtn {
    display: inline-block;
    padding: 6px 10px;
    background-color: #6699FF;
    color: white;
    margin: 0 10px;
    border-radius: 6px;
    cursor: pointer;
  }

  .el-table {
    margin: 30px auto;
  }

  .myBox{
    display: inline-block;
    margin-left: 50px;
  }

  .littleTitle{
    margin-right: 10px;
  }

  .content{
    margin-top: 20px;
  }

  .xinz{
    display: inline-block;
    margin-left: 20px;
  }

  .bigBtn,.bBtn,.rBtn{
    display: inline-block;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: white;
    margin-left: 5px;
  }

  .bigBtn{
    background-color: #FF9900;
  }

  .bBtn{
    background-color: #6699FF;
  }

  .rBtn{
    background-color: #FF0000;
  }
</style>